<template>
  <div class="common-layout">
    
    <div class="header">
           <span @click="$router.go(-1)">←</span>
           <span>编辑通知</span>
    </div>
    <div class="banner">
    <el-container>
    <el-main>
        <el-form :model="form" label-width="120px">
            <el-form-item label="通知类型：" >
            <el-select v-model="form.region" placeholder="请选择通知类型" >
                <!-- <el-option :label="$store.alertlist.alerttype" :value="$store.alertlist.alerttype" /> -->
                <el-option :label="item.alerttype" :value="item.alerttype" v-for="(item ,index) in $store.alertlist" :key="index"  />
            </el-select>
            </el-form-item>
            <el-form-item label="发布范围：">
            <el-radio-group v-model="form.resource">
                <el-radio label="全校" />
                <el-radio label="全部班级" />
                <el-radio label="全部教师" />
                <el-radio label="指定班级/科室或部门" />
            </el-radio-group>
            </el-form-item>
            <el-form-item label="发布对象：">
                <el-checkbox-group v-model="form.type">
                    <el-checkbox label="老师" name="type" />
                    <el-checkbox label="学生" name="type" />
                    <el-checkbox label="家长" name="type" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="定时发布：">
                <el-switch
                    v-model="value2"
                    class="mt-2"
                    style="margin-left: 24px"
                    inline-prompt
                    :active-icon="Check"
                    :inactive-icon="Close"
                />
            <el-col :span="11" v-show="value2">
                <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="定时发布的日期"
                style="width: 100%"
                />
            </el-col>
            </el-form-item>
            <el-form-item label="通知标题：">
            <el-input class="type" v-model="form.name" />
            </el-form-item>
            
            <el-form-item label="通知内容">
            <el-input  class="type" v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">创建</el-button>
            <el-button text @click="dialogCkeakVisible = true">取消创建</el-button>
              <el-dialog v-model="dialogCkeakVisible" 
                    title="取消创建">
                    <h3>确认取消按钮并返回通知列表页面</h3>
                    <!-- 确认取消按钮 -->
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogCkeakVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogCkeakVisible = false , router.push('/index/family-schoolInteraction/alertlist/')">
                        确定
                        </el-button>
                    </span>
                    </template>
                </el-dialog>
            </el-form-item>
        </el-form>
      </el-main>
    </el-container>
</div>
  </div>
</template>

<script setup>
import { Check, Close } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import {storeToRefs} from 'pinia'
import {alertliststore} from '../stores/counterzsq'
import { onMounted, ref ,reactive} from 'vue'

var $store = alertliststore();

onMounted(()=>{
  $store.request_list()
  $store.request_alertdata()
})
 
const dialogCkeakVisible = ref(false)
// 路由
var router = useRouter()
const value2 = ref(true)

// 点击返回前一页
const goBack = () => {
    console.log('go back')
    router.go(-1);
}

// id:$store.alertlist.length+1,
// var len = localStorage.getItem('alertlist').length
    const form = reactive({
        id:$store.alertlist.length+1,
        name: '',//通知标题
        region: '',//通知类型
        date1: '',//发布时间
        type: [],//发布对象
        resource: '',//发布范围
        desc: '',//通知内容
    })
    
const onSubmit = () => {
    if(form.name != '' && form.region != '' && form.date1 != '' && form.type != '' && form.resource != ''  && form.desc != ''){
    // 发送请求将内容插入列表中
    console.log(form);
    console.log('submit!')
    $store.request_alertadd(form)
    }else{
        alert('请填入要发布的内容信息')
    }
    }
</script>

<style  scoped>
*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    height: 80px;
    padding-left: 40px;
    box-sizing: border-box;
    line-height: 70px;
    color: rgba(24,144,255,1);
    box-shadow: 5px 5px 5px #cecaca;
}

.common-layout{
padding-top: 30px;
}
.header span{
    margin-right: 20px;
}


.banner{
    padding: 80px 280px;
}

.el-form-item{
    margin-bottom: 18px;
}
span{
    margin-right: 8px;
    margin-left: 8px;
}

.el-button{
    padding: 8px 30px;
    margin-right: 10px;
}

.el-checkbox__label{
    padding-left: 8px;
    padding-right: 6px;
}
</style>